<template>
  <div>
    <a-table :columns="columns" :data-source="voucherOrderList" :pagination="pagination"
             row-key="id" style="word-break: break-all;">
    </a-table>
  </div>
</template>

<script setup lang="ts">
import {getVoucherOrderById} from "@/api/activity/voucherDetails";
import {useRouter} from "vue-router";
import {ref} from "vue";
import {TableColumnType} from "ant-design-vue";

const router = useRouter()

//活动id
const voucherId = Number(router.currentRoute.value.params.id)

interface DataType {
  key: string;
  id: number;
}

//标签
const columns: TableColumnType<DataType>[] = [
  {
    title: '订单id',
    align: "center",
    width: 200,
    dataIndex: 'id',
  },
  {
    title: '下单的用户id',
    align: "center",
    width: 150,
    dataIndex: 'userId',
  },
  {
    title: '优惠券id',
    align: "center",
    width: 100,
    dataIndex: 'voucherId',
  },
  {
    title: '支付方式',
    align: "center",
    width: 100,
    dataIndex: 'payType',
  },
  {
    title: '下单时间',
    align: "center",
    width: 200,
    dataIndex: 'createTime',
  },
  {
    title: '支付时间',
    align: "center",
    width: 200,
    dataIndex: 'payTime',
  },
  {
    title: '退款时间',
    align: "center",
    width: 200,
    dataIndex: 'refundTime',
  },
];

//抢购列表
const voucherOrderList = ref()

//根据优惠券d获取抢购详情
const handleVoucherOrderById = () => {
  getVoucherOrderById(voucherId, pagination.value.current, pagination.value.pageSize).then((res) => {
    voucherOrderList.value = res.data.data.map.list
    pagination.value.total = res.data.data.map.total
  })
}

//分页参数
const pagination = ref({
  size: 'large',
  current: 1,
  pageSize: 10,
  total: 0,
  pageSizeOptions: ['10', '20', '30'],
  showTotal: (total: number) => {
    return " 共" + total + "条"
  },
  showSizeChanger: true,
  onShowSizeChange: (current: number, pageSize: number) => {
    pagination.value.pageSize = pageSize
    handleVoucherOrderById()
  },
  onChange: (current: number) => {
    pagination.value.current = current
    handleVoucherOrderById()
  }
})

handleVoucherOrderById()
</script>

<style lang="less" scoped>
.main_operation {
  margin: 10px;
  display: flex;

  .main_operation_item {
    margin-right: 10px;
  }

  .main_operation_edit {
    background-color: palegreen;
    margin-right: 10px;
  }

  .main_operation_export {
    background-color: sandybrown;
    margin-right: 10px;
  }
}

.main_rest {
  margin-left: 5px;
}

.main_operation_button {
  margin: 5px;
}

:deep(.ant-form-item-control-input-content) {
  margin-bottom: 5px;
}
</style>